<template>
    <div v-show="show" class="login-content">
    <div class="logo">
        <img src="login.png" alt="">
    </div>
      <van-cell-group>
        <van-field label="邮箱号" type="tel" v-model="phone" maxlength="20" placeholder="请输入邮箱号" />
        <van-field
          v-model="verifycode"
          center
          clearable
          label="验证码"
          placeholder="请输入验证码">
          <van-button slot="button" size="small" type="primary" @click="sendVerifycode()" :disabled="!disabledCodeBtn">{{codeText}}</van-button>
        </van-field>
      </van-cell-group>
      <div class="btn padding">
        <van-button type="primary" size="large" @click="login()">登陆</van-button>
      </div>
    </div>
</template>

// 以上是 vant-ui
<script>
import Vue from 'vue'
import {Field, CellGroup, Button, Toast} from 'vant'
import axios from 'axios'
import qs from "qs"							//qs引用
import { mapMutations } from 'vuex'
Vue.prototype.$qs=qs;


//   import api from 'api/api_lib'  // api换成自己的

  export default {
    name: 'login',
    data () {
      return {
        phone: '',
        verifycode: '',
        codeText:'获取',
        disabledCodeBtn: true,
        show:true
      }
    },
    components: {
      [Field.name]: Field,
      [CellGroup.name]: CellGroup,
      [Button.name]: Button,
      [Toast.name]: Toast
    },
    methods: {
    ...mapMutations('Showhidebar',['toplogohide','topbarhide','buttomhide','toplogoshow','topbarshow','buttomshow']),
    // 向后台要验证码方法
    //   async sendVerifycode(){
    //     if(this.verifyPhone()){
    //       Toast(this.verifyPhone())
    //     } else {
    //       let res = await api.pp.sms.getVerifyCode(this.phone)
    //       //  用手机号向后台换取验证码，发送成功则开始调用倒计时分方法
    //       if(res){
    //         this.countDown(60)
    //       }
    //     }
    //   },
    sendVerifycode() {
        console.log(1)
        let url='http://112.74.63.92:3000/user/getmail';   //请求的接口地址
		let url_data=this.$qs.stringify({				//使用qs编译转换参数 ，将参数赋值与url_data
			mail:this.phone							//qs编译转换的参数， user_id为接口关键字，7为参数值
		})
        axios.post(url,url_data).then(rese=>{		//post接口请求
			this.pri=rese.data.cart		
             this.countDown(60)				//接口数据赋值
			console.log(rese.data)						//打印接口数据
		})
    },
      // 表单校验方法
      verifyPhone(){
        if(!this.phone){
          return '请输入邮箱'
        } else if(this.phone.length > 20){
          return '请输入11位手机号'
        } else {
          return false
        }
      },
  	// 倒计时方法
      countDown (time) {
        if (time === 0) {
          this.disabledCodeBtn = true
          this.codeText = "获取"
          return
        } else {
          this.disabledCodeBtn = false;
          this.codeText = '重新发送(' + time + ')'
          time--
        }
        setTimeout(()=> {
          this.countDown(time)
        }, 1000)
      },
      // 登录
      login(){
        if(this.verifyPhone()){
          Toast(this.verifyPhone())
        } else {
        let url='http://112.74.63.92:3000/user/login';   //请求的接口地址
		let url_data=this.$qs.stringify({				//使用qs编译转换参数 ，将参数赋值与url_data
			code:this.verifycode					//qs编译转换的参数， user_id为接口关键字，7为参数值
		})
        axios.post(url,url_data).then(rese=>{		//post接口请求
			this.pri=rese.data.cart						//接口数据赋值
			console.log(rese.data.err)	
            if(rese.data.err===0){
                Toast('登陆成功')
                sessionStorage.setItem('code',rese.data.code)
                window.location.hash='/User'
            }else{
                Toast('邮箱或验证码有误')
               

            }					//打印接口数据
		})
          // 这里写登录的接口
        }
      }
    },
    mounted () {
    this.toplogohide()
    this.topbarhide()
    this.buttomhide()
    },
    beforeDestroy () {
    this.toplogoshow()
    this.topbarshow()
    this.buttomshow()
    },
  }
</script>

<style scoped>
 .login-content{
      background-color: #fff;

} 
.logo {
    margin: 79px auto 40px;
    text-align: center;
    height: 60px;
    line-height: 60px;
}

div {
    box-sizing: border-box;
}

.logo img {
    height: 60px;
    width: 60px;
}
.van-button--large {
    width: 100%;
    height: 44px;
}
  /* .padding{
    padding: 40px 15px;
  }  */
</style>